<template>
	<view class="mine animation-fade">
		<!-- 顶部 -->
		<!-- <cu-custom bgImage="linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))" :isBack="false" :isShadown="false">
			<block slot="backText"></block>
			<block slot="content">我的</block>
		</cu-custom> -->
		
		<view class="logo flexlogo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="login ? avatarUrl :avatarUrl"></image>
			<view class="logo-title flexlogo">
				<text class="uer-name ">Hi，{{login ? uerInfo.nickName : '您未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="!login">
					<text class="cuIcon-right"></text>
				</text>
			</view>
		</view>
		
		<view class="cu-list menu sm-border card-menu margin-top bar-shadown">
			<view class="cu-item arrow" @click="goUserInfo">
				<view class="content">
					<text class="cuIcon-copy text-grey"></text>
					<text class="text-grey">用户信息</text>
				</view>
			</view>
			<view class="cu-item arrow" >
				<view class="content">
					<text class="cuIcon-copy text-grey"></text>
					<text class="text-grey">修改密码</text>
				</view>
			</view>
			
			<!-- #ifdef APP-PLUS -->
			<view class="cu-item arrow" @tap="getVersionData">
				<view class="content">
					<text class="cuIcon-pick text-grey"></text>
					<text class="text-grey">检测更新</text>
				</view>
				<view class="action">
					v{{ version }}
				</view>
				
			</view>
			<!-- #endif -->
			
			<view class="cu-item arrow" >
				<view class="content">
					<text class="cuIcon-info text-grey"></text>
					<text class="text-grey">关于</text>
				</view>
			</view>
			
			<view class="cu-item" >
				<view class="content">
					<button class="cu-btn round bg-red shadow" @tap="loginOut">
						退出登录
					</button>
				</view>
					
			</view>
			
		</view>
		
		<!-- 退出登录 -->
		<view class="cu-modal" :class="loginOutShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">退出登录</view>
					<view class="action" @tap="loginOutHide">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定退出登录？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-black" @tap="loginOutHide">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="loginOut">确定</button>
		
					</view>
				</view>
			</view>
		</view>
		
		<!-- 检测版本 -->
		<view class="cu-modal" :class="versionShow?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">有新版本更新</view>
					<view class="action" @tap="loginOutHide">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					确定下载？
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-black" @tap="loginOutHide">取消</button>
						<button class="cu-btn bg-red margin-left" @tap="isDownload">确定</button>
		
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {
		getisLogin,
	} from '../../service/api/login.js' //登录api
	import {
		getVersion,
	} from '../../service/api/version.js' //版本api
	
	export default {
		data() {
			return {
				login: false, //是否登录
				avatarUrl: "http://pi7x77.natappfree.cc/images/login/1.jpg",
				uerInfo: "",//用户信息
				versionShow: false, //新版本下载弹出
				version: "",//版本号
				vDownUrl: "",//最新版下载地址
				loginOutShow: false, //登录退出确认框
			}
		},
		mounted() {
			var _this = this
			//getisLogin() //检测登录状态
			const value = uni.getStorageSync('userinfo')
			console.log(value.nickName)
			//this.uerInfo=this.$store.getters.getUserData
			this.uerInfo=value
			if(this.uerInfo!=""){
				this.login=true
			}
			
			//#ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid,function(inf){  
				_this.version=inf.version //赋值版本号
				//console.log("当前应用版本："+inf.version);  
			});  
			//#endif
			
		},
		methods: {
			goLogin() {
				//登录
				if (!this.login) {
					console.log("点击前往登录")
					uni.navigateTo({
						url: './mine/children/login',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
			},
			loginOut() {
				//退出登录
				var _this=this
				const value = uni.getStorageSync('setUserData')
				if(_this.loginOutShow){
					_this.$store.dispatch("setUserData","") //清空登录状态
					try {
						uni.removeStorageSync('setUserData'); //清空登录缓存
					} catch (e) {
						// error
					}
					//getisLogin() //检测登录状态
					console.log("退出登录")
					_this.loginOutShow=false
					uni.reLaunch({
						url: '/pages/mine/children/login',
					});
				}else{
					_this.loginOutShow=true
				}
			},
			loginOutHide(){
				//退出登录取消
				this.loginOutShow=false
				//版本下载取消
				this.versionShow=false
			},
			getVersionData(){
				var _this =this
				//检查版本 用以升级
				uni.showLoading({
					title: '检测更新...'
				});
				getVersion()
				.then(res => {
					//console.log(res)
					if(_this.version<res.data.version){
						_this.vDownUrl=res.data.url //赋值下载地址
						_this.versionShow=true //弹窗
						uni.showToast({
							position: 'bottom',
							title: "有新版本"
						});
						uni.hideLoading();
					}else{
						uni.hideLoading();
						uni.showToast({
							position: 'bottom',
							title: "无新版本可更新！"
						});
					}
					
				}).catch(err => {
					console.log(err)
					uni.hideLoading();
					uni.showToast({
						position: 'bottom',
						title: "检测失败！"
					});
				})
			},
			isDownload(){
				var _this=this
				_this.loginOutHide()
				//下载更新包 整包下载（浪费 不推荐）
				console.log(_this.vDownUrl)
				var wgtUrl=_this.vDownUrl;
				
				var downToak=plus.downloader.createDownload( wgtUrl, {filename:"_doc/update/"}, function(d,status){  
					if ( status == 200 ) {   
						console.log("下载App成功："+d.filename);  
						plus.nativeUI.showWaiting("安装中...");  
						plus.runtime.install(d.filename,{},function(){  
							plus.nativeUI.closeWaiting();  
							console.log("安装成功！");  
							plus.nativeUI.alert("应用资源更新完成！",function(){  
								plus.runtime.restart();  
							});  
						},function(e){  
							plus.nativeUI.closeWaiting();  
							console.log("安装失败["+e.code+"]："+e.message);  
							plus.nativeUI.alert("安装失败["+e.code+"]："+e.message);  
						});  
					} else {  
						console.log("下载App失败！");  
						plus.nativeUI.alert("下载App失败！");  
					}  
					plus.nativeUI.closeWaiting();  
				})
				downToak.start(); // 开启下载的任务
				var prg = 0;
				var showLoading = plus.nativeUI.showWaiting("正在下载,由于是国外服务器,时间较长请勿关闭...");   //创建一个showWaiting对象 
				downToak.addEventListener("statechanged", function(task, status) {  //给下载任务设置一个监听 并根据状态  做操作
					switch(task.state) {
						case 1:
							showLoading.setTitle("正在下载");
						break;
						case 2:
							showLoading.setTitle("已连接到服务器");
						break;
						case 3:
							prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task.totalSize) * 100);
							if(prg % 1 == 0) {  // 让百分比 增长
								showLoading.setTitle("　　 已下载" + prg + "%　　 ");
							}
						break;
						case 4:
							plus.nativeUI.closeWaiting();
						break;
				
					}
				
				});

			},
			goUserInfo(){
				console.log("获取用户信息")
				uni.navigateTo({
				    url: './mine/children/userInfo'
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/color/color.scss";
	
	button .cu-tag {
		position: absolute;
		top: 8upx;
		right: 8upx;
	}
	
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
	}

	.flexlogo{
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 360upx;
		padding: 36upx;
		box-sizing: border-box;
		background: $blackColor-linear;
		flex-direction: row;
		align-items: center;
		
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
		background: #000000;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>